<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习-表格</title>
		<style type="text/css">
			@font-face {
			  font-family: 'icomoon';
			  src:  url('fonts/icomoon.eot?hgbh9b');
			  src:  url('fonts/icomoon.eot?hgbh9b#iefix') format('embedded-opentype'),
			    url('fonts/icomoon.ttf?hgbh9b') format('truetype'),
			    url('fonts/icomoon.woff?hgbh9b') format('woff'),
			    url('fonts/icomoon.svg?hgbh9b#icomoon') format('svg');
			  font-weight: normal;
			  font-style: normal;
			  font-display: block;
			}
			
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				height: 3000px;
			}
			
			
			ul li {
				list-style: none;
			}
			
			table {
				border-collapse: collapse;
				border: 2px solid black;
				margin-left: 20px;
			}
			
			table tr {
				border: 2px solid black;
			}
			
			table tr th {
				padding: 0 10px;
				border: 2px solid black;
			}
			
			table tr td {
				border: 2px solid black;
			}
			
			.right {
				padding-right: 40px;
			}
			
			.icon {
				font-family: 'icomoon';
				font-size: 12px;
				color: #abbf5c;
			}
			
			.icon-top {
				font-family: 'icomoon';
				font-size: 12px;
				color: #ca6351;
			}
			
			/* 粘性定位练习--------------------------- */
			.pos {
				position: sticky;
				top: 0;
				width: 800px;
				height: 50px;
				background-color: pink;
				margin: 30px auto;
				text-align: center;
				line-height: 50px;
				color: green;
			}
			
			/*  */
			.test {
				display: inline-block;
				position: relative;
				width: 298px;
				height: 210px;
				margin-left: 30px;
			}
			
			.test img {
				width: 100%;
				height: 100%;
			}
			
			.hide {
	            display: none;
				position: absolute;
				top: 0;
				left: 0;
				font-family: 'icomoon';
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.3);
				text-align: center;
				line-height: 210px;
				color: #db8b33;
				font-size: 20px;
			}
			
			.test:hover .hide {
				display: block;
			}
			
			/* 轮播图 */
			.banner {
				position: relative;
				width: 590px;
				height: 470px;
				margin: 20px auto;
				
			}
			
			.banner a img {
				width: 100%;
				height: 100%;
			}
			
			.banner .left {
				font-family: 'icomoon';
				position: absolute;
				left: 0;
				top: 47%;
				width: 25px;
				height: 35px;
				background-color: rgba(0,0,0,0.3);
				border-radius: 0 50% 50% 0;
				line-height: 35px;
				text-decoration: none;
				color: white;
				text-align: center;
			}
			
			.banner .banner-right {
				font-family: 'icomoon';
				position: absolute;
				right: 0;
				top: 47%;
				width: 25px;
				height: 35px;
				background-color: rgba(0,0,0,0.3);
				border-radius: 50% 0 0 50%;
				line-height: 35px;
				text-decoration: none;
				color: white;
				text-align: center;
			}
			
			.left:hover,.banner-right:hover {
				background-color: rgba(0,0,0,0.5);
			}
			
			.banner  ul {
				position: absolute;
				left: 35px;
				bottom: 18px;
				width: 91.8px;
				height: 13.8px;
				display: flex;
				justify-content: space-between;
				
			}
			
			.banner ul li {
				width: 9.6px;
				height: 9.6px;
				float: left;
				
			}	
					
			.banner ul li a {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 100%;
				background-color: rgba(255,255,255,0.6);
				text-decoration: none;
				color: white;
				text-align: center;
			}
					
			.banner ul li a:hover {
				background-color: rgba(255,255,255,1);
			}
			
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>排名</th>
				<th>关键词</th>
				<th>趋势</th>
				<th>今日搜索</th>
				<th>最近七日</th>
				<th>相关链接</th>
			</tr>
			<tr>
				<td>1</td>
				<td>鬼吹灯</td>
				<td class="icon"></td>
				<td>124</td>
				<td>675432</td>
				<td class="right">
					<a href="#">贴吧</a>
					<a href="#">图片</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>盗墓笔记</td>
				<td class="icon"></td>
				<td>124</td>
				<td>675432</td>
				<td class="right">
					<a href="#">贴吧</a>
					<a href="#">图片</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>西游记</td>
				<td class="icon-top"></td>
				<td>212</td>
				<td>7654</td>
				<td class="right">
					<a href="#">贴吧</a>
					<a href="#">图片</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>4</td>
				<td>东游记</td>
				<td class="icon-top"></td>
				<td>23</td>
				<td>76545</td>
				<td class="right">
					<a href="#">贴吧</a>
					<a href="#">图片</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>5</td>
				<td>甄嬛传</td>
				<td class="icon"></td>
				<td>121</td>
				<td>7676</td>
				<td class="right">
					<a href="#">贴吧</a>
					<a href="#">图片</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>6</td>
				<td>水浒传</td>
				<td class="icon-top"></td>
				<td>576576</td>
				<td>1231421</td>
				<td class="right">
					<a href="#">贴吧</a>
					<a href="#">图片</a>
					<a href="#">百科</a>
				</td>
			</tr>
			<tr>
				<td>7</td>
				<td>三国演义</td>
				<td class="icon-top"></td>
				<td>234</td>
				<td>7686</td>
				<td class="right">
					<a href="#">贴吧</a>
					<a href="#">图片</a>
					<a href="#">百科</a>
				</td>
			</tr>
			
			
		</table>
		
		<div class="pos">
			pink老师-粘性定位
		</div>
		
		<!-- 隐藏元素加定位练习 -->
		<div class="test">
			<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
			<div class="hide">
				
			</div>
		</div>
		
		<div class="test">
			<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
			<div class="hide">
				
			</div>
		</div>
		
		<div class="test">
			<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
			<div class="hide">
				
			</div>
		</div>
		
		<div class="test">
			<img src="img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg" >
			<div class="hide">
				
			</div>
		</div>
		
		<!-- 轮播图 -->
		<div class="banner">
			<a href="#"><img src="img/07eec355fd50517f9e9d6fe9ac518caa1e169466.jpg@1e_1c.webp.jpg" ></a>
			<a class="left" href="#"></a>
			<a class="banner-right" href="#"></a>
			<ul>
				<li><a href="#" class="btn"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
	</body>
</html>
